<template>
  <view>
    <!-- 底层背景颜色 -->
    <view class="bg-color" />
    <!-- 顶部topbar -->
    <view class="top-bar">
      <text class="title">发布</text>
      <navigator url="" class="notice-btn">
        <image class="notice-icon" src="/static/question/notice.png" />
      </navigator>
    </view>
    <view class="btn-area">
      <!-- 按钮区 -->
      <navigator url="/pages/postQuestion">
        <button class="post question-btn" type="default">
          <view class="btn-info">
            <text> 发布问题 </text>
            <text class="note"> 等待更多的解答 </text>
          </view>
          <img class="question-icon" src="/static/question/postQuestion.png" />
        </button>
      </navigator>
      <navigator url="/pages/search">
        <button class="search question-btn" type="default">
          <img
            class="question-icon"
            src="/static/question/searchQuestion.png"
          />
          <view class="btn-info">
            <text> 搜索问题 </text>
            <text class="note"> 寻找更多的解答 </text>
          </view>
        </button>
      </navigator>
    </view>
    <!-- 水平滚动导航栏 -->
    <view class="horizonal-tab">
      <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
        <block v-for="(item, index) in tabBars" :key="index">
          <view
            class="scroll-tab-item"
            :class="{ active: tabIndex == index }"
            @tap="toggleTab(index)"
          >
            {{ item.name }}
            <view class="scroll-tab-line"></view>
          </view>
        </block>
      </scroll-view>
    </view>
    <!-- 内容区 -->
    <view class="content">
      <!-- 滑块视图 -->
      <swiper
        :current="tabIndex"
        @change="tabChange"
        style="height: calc(100vh - 280rpx)"
      >
        <!-- current:当前所在滑块的index,1表示关注 -->
        <swiper-item key="1">
          <!-- swiper与scroll-view联动实现页面局部上下滑动 -->
          <scroll-view scroll-y="true" style="height: 100%">
            <!-- 瀑布流 -->
            <custom-waterfalls-flow :value="data.list">
              <view
                class="item"
                v-for="(item, index) in data.list"
                :key="index"
                slot="slot{{index}}"
              >
                <view class="title">{{ item.title }}</view>
                <view class="desc">{{ item.desc }}</view>
              </view>
            </custom-waterfalls-flow>
            <!-- 底部加载中 -->
            <view class="loading" v-if="loading == true">加载中...</view>
            <view class="loading" v-if="loading == false">—— 到底啦 ——</view>
          </scroll-view>
        </swiper-item>
        <!-- key="2"表示热门 -->
        <swiper-item key="2">
          <!-- swiper与scroll-view联动实现页面局部上下滑动 -->
          <scroll-view scroll-y="true" style="height: 100%">
            <!-- 瀑布流 -->
            <custom-waterfalls-flow :value="data.list">
              <view
                class="item"
                v-for="(item, index) in data.list"
                :key="index"
                slot="slot{{index}}"
              >
                <view class="title">{{ item.title }}</view>
                <view class="desc">{{ item.desc }}</view>
              </view>
            </custom-waterfalls-flow>
            <!-- 底部加载中 -->
            <view class="loading" v-if="loading == true">加载中...</view>
            <view class="loading" v-if="loading == false">—— 到底啦 ——</view>
          </scroll-view>
        </swiper-item>
        <!-- key="3"表示最新 -->
        <swiper-item key="3">
          <!-- swiper与scroll-view联动实现页面局部上下滑动 -->
          <scroll-view scroll-y="true" style="height: 100%">
            <!-- 瀑布流 -->
            <custom-waterfalls-flow :value="data.list">
              <view
                class="item"
                v-for="(item, index) in data.list"
                :key="index"
                slot="slot{{index}}"
              >
                <view class="title">{{ item.title }}</view>
                <view class="desc">{{ item.desc }}</view>
              </view>
            </custom-waterfalls-flow>
            <!-- 底部加载中 -->
            <view class="loading" v-if="loading == true">加载中...</view>
            <view class="loading" v-if="loading == false">—— 到底啦 ——</view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0 /* 选中序列,默认显示第一个 */,
      tabBars: [
        {
          name: "关注",
          id: "follow",
        },
        {
          name: "热门",
          id: "hot",
        },
        {
          name: "最新",
          id: "new",
        },
      ],
      listQuery: {
        current: 1,
        total: 0,
        size: 4,
      },
      proverty: [],
      loading: true,
      data: {
        list: [
          {
            image: "https://via.placeholder.com/200x500.png/ff0000",
            title: "我是标题1",
            desc: "描述描述描述描述描述描述描述描述1",
          },
          {
            image: "https://via.placeholder.com/200x200.png/2878ff",
            title: "我是标题2",
            desc: "描述描述描述描述描述描述描述描述2",
          },
          {
            image: "https://via.placeholder.com/200x200.png/2878ff",
            title: "我是标题2",
            desc: "描述描述描述描述描述描述描述描述2",
          },
        ],
      },
    };
  },
  methods: {
    //切换选项卡
    toggleTab(index) {
      this.tabIndex = index;
    },
    //滑动切换swiper
    tabChange(e) {
      console.log(e);
      this.tabIndex = e.detail.current;
    },
  },
};
</script>

<style lang="scss">
.bg-color {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: -1;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 60rpx;
    margin: 0 0 50rpx 70rpx;
  }
  .notice-btn {
	display: flex;
	justify-content: center;
	align-items: center;
    width: 60rpx;
	margin: 0;
    margin-right: 10rpx;
    height: 60rpx;
    .notice-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
.btn-area {
  display: flex;
  justify-content: space-evenly;
  padding-top: 20rpx;
  .search {
    background-color: #6cb1da;
  }
  .post {
    background-color: #14ceb7;
  }
  .question-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40rpx;
    width: 350rpx;
    height: 200rpx;
    box-shadow: 6rpx 6rpx 15rpx 2rpx #666;
    .btn-info {
      display: flex;
      justify-content: center;
      flex-direction: column;
      font-size: 40rpx;
      line-height: 50rpx;
      font-weight: bold;
      .note {
        font-size: 12rpx;
        font-weight: normal;
      }
    }
    .question-icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.horizonal-tab {
  font-size: 34rpx;
  margin: 50rpx 0 20rpx 20rpx;
  .scroll-tab {
    white-space: nowrap; /* 必要，导航栏才能横向*/
  }
  .scroll-tab-item {
    display: inline-block; /* 必要，导航栏才能横向*/
    margin: 20rpx 30rpx 0 30rpx;
  }
  .active {
    color: #000;
    text-align: center;
    font-size: 36rpx;
    .scroll-tab-line {
      border-top: 4rpx solid #333;
      border-radius: 20rpx;
      width: 100rpx;
    }
  }
}
.content {
  margin: 0 40rpx;
}
</style>
